<template>
  <div class="box">
    <span>
      在遥远的星际间，漂浮着一颗神秘的星球。它的表面覆盖着绚丽的荧光，犹如夜空中闪烁的星星。星球上的生物们拥有着超乎寻常的能力，它们可以与宇宙中的能量交流，创造出令人叹为观止的奇迹。
      一天，一位年轻的探险家踏上了这颗星球的旅程。他怀揣着对未知世界的好奇和渴望，勇敢地穿越了星际的障碍，终于来到了这片神奇的土地。
      在星球上，他遇到了各种奇特的生物和景象。有的生物能够操控火焰，将周围的空气点燃成熊熊烈火；有的生物则能够操纵水流，创造出波涛汹涌的海浪。他还见到了一片悬浮在空中的花园，花园中的植物散发着迷人的光芒，仿佛在诉说着古老的传说。
      探险家被这些奇妙的景象深深吸引，他开始与星球上的生物们交流，学习它们的智慧和力量。他渐渐发现，这颗星球上的生物们并不是孤立的存在，它们与宇宙中的其他星球和生命形式有着紧密的联系。
      通过这次旅程，探险家不仅增长了见识，也收获了珍贵的友谊。他明白了，宇宙中的每一个生命都是独特而宝贵的，它们共同构成了这个浩瀚无垠的宇宙大家庭。
      请注意，这只是一个简单的随机文本示例，您可以根据需要调整文本的长度、风格和内容。如果您需要更具体或具有特定主题的文本，请告诉我，我会尽力满足您的需求。
    </span>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.box {
  color: #222;
  line-height: 2;
  text-align: start;
  span {
    background: linear-gradient(to right, #7e2f2b, #146220) no-repeat right
      bottom;
    background-size: 0 2px;
    transition: background-size 1s;

    &:hover {
      background-position: left bottom;
      background-size: 100% 2px;
    }
  }
}
</style>
